---
title: Preview Card
description: A popup that appears when a link is hovered, showing a preview for sighted users.
author:
  name: imskyleen
  url: https://github.com/imskyleen
---

<ComponentPreview name="demo-components-base-preview-card" />

## Installation

<ComponentInstallation name="components-base-preview-card" />

## Usage

```tsx
<PreviewCard>
  <PreviewCardTrigger>Hover me</PreviewCardTrigger>
  <PreviewCardPanel>
    <p>Preview card content</p>
  </PreviewCardPanel>
</PreviewCard>
```

## API Reference

### PreviewCard

<div className="flex flex-col gap-2">
<ExternalLink
  href="https://animate-ui.com/docs/primitives/base/preview-card#previewcard"
  text="Animate UI API Reference - PreviewCard"
/>

<ExternalLink
  href="https://base-ui.com/react/components/preview-card#root"
  text="Base UI API Reference - PreviewCard.Root"
/>
</div>

### PreviewCardTrigger

<div className="flex flex-col gap-2">
<ExternalLink
  href="https://animate-ui.com/docs/primitives/base/preview-card#previewcardtrigger"
  text="Animate UI API Reference - PreviewCardTrigger"
/>

<ExternalLink
  href="https://base-ui.com/react/components/preview-card#trigger"
  text="Base UI API Reference - PreviewCard.Trigger"
/>
</div>

### PreviewCardPanel

<div className="flex flex-col gap-2">
<ExternalLink
  href="https://animate-ui.com/docs/primitives/base/preview-card#previewcardpositioner"
  text="Animate UI API Reference - PreviewCardPositioner"
/>

<ExternalLink
  href="https://base-ui.com/react/components/preview-card#positioner"
  text="Base UI API Reference - PreviewCard.Positioner"
/>
</div>

### PreviewCardBackdrop

<div className="flex flex-col gap-2">
<ExternalLink
  href="https://animate-ui.com/docs/primitives/base/preview-card#previewcardbackdrop"
  text="Animate UI API Reference - PreviewCardBackdrop"
/>

<ExternalLink
  href="https://base-ui.com/react/components/preview-card#backdrop"
  text="Base UI API Reference - PreviewCard.Backdrop"
/>
</div>

## Credits

- [Base UI Preview Card](https://base-ui.com/react/components/preview-card)
- Credit to [shadcn/ui](https://ui.shadcn.com/docs/components/hover-card) for style inspiration.
